import React, { useState, useEffect } from 'react';
import {
    File,
    ListFilter,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/components/ui/popover"
import { Separator } from "@/components/ui/separator"
export default function ({ tagOptions, accountOptions, onAccountNoChange, onTagsChange, primaryTags }) {
    const [currentAccountNo, setCurrentAccountNo] = useState(null);
    const [currentTags, setCurrentTags] = useState([]);
    const [filterSize, setFilterSize] = useState(0);
    useEffect(() => {
        setFilterSize((currentAccountNo ? 1 : 0) + (currentTags.length > 0 ? 1 : 0));
    }, [currentAccountNo, currentTags]);
    return (
        <div>
            <Popover>
                <PopoverTrigger asChild>
                    <Button
                        size="sm"
                        variant="outline"
                        className="h-7 gap-1 text-sm"
                    >
                        <ListFilter className="h-3.5 w-3.5" />
                        <span>{filterSize > 0 ? `+${filterSize}` : ''}</span>
                        <span className="sr-only sm:not-sr-only">Filter</span>
                    </Button>
                </PopoverTrigger>
                <PopoverContent className="w-80 max-h-96" side="top">
                    <div>
                        <h4 className="font-medium leading-none">Multiple Filters</h4>
                        <div className="grid gap-2 max-h-72 overflow-y-auto">
                            <ul role="list">
                                <li class="py-3 sm:py-4">
                                    <p className="text-sm text-muted-foreground">Set Create Accounts Filter</p>
                                    <Separator className="my-2" />
                                    <div
                                        className="mx-auto grid w-full max-w-3xl grid-cols-2 gap-4 text-xs text-slate-600 sm:grid-cols-3 sm:gap-2 sm:text-sm md:grid-cols-4 md:text-base"
                                    >
                                        {accountOptions.map(opt => {
                                            return <button
                                                onClick={() => {
                                                    if (currentAccountNo === opt.value) {
                                                        setCurrentAccountNo(null);
                                                        onAccountNoChange(null);
                                                    } else {
                                                        setCurrentAccountNo(opt.value);
                                                        onAccountNoChange(opt.value);
                                                    }
                                                }}
                                                className={`rounded-lg p-2 ${currentAccountNo === opt.value ? 'bg-blue-600 text-slate-200 ' : 'bg-slate-200'}`}
                                            >
                                                {opt.label}<span className="p-1 opacity-60 sm:p-2">({opt.count}条)</span>
                                            </button>
                                        })}
                                    </div>
                                </li>
                                <li class="py-3 sm:py-4">
                                    <p className="text-sm text-muted-foreground">Set Fund Primary Tags Filter</p>
                                    <Separator className="my-2" />
                                    <div
                                        className="mx-auto grid w-full max-w-3xl grid-cols-2 gap-4 text-xs text-slate-600 sm:grid-cols-3 sm:gap-2 sm:text-sm md:grid-cols-4 md:text-base"
                                    >
                                        {tagOptions.filter(opt => primaryTags.includes(opt.value)).map(opt => {
                                            return <button
                                                onClick={() => {
                                                    const changeTags = [...currentTags];
                                                    if (changeTags.includes(opt.value)) {
                                                        changeTags.splice(changeTags.indexOf(opt.value), 1);
                                                        setCurrentTags(changeTags);
                                                        onTagsChange?.(changeTags);
                                                    } else {
                                                        changeTags.push(opt.value);
                                                        setCurrentTags(changeTags);
                                                        onTagsChange?.(changeTags);
                                                    }
                                                }}
                                                className={`rounded-lg p-2 ${currentTags.includes(opt.value) ? 'bg-blue-600 text-slate-200' : 'bg-slate-200'}`}
                                            >
                                                {opt.label}<span className="p-1 opacity-60 sm:p-2">({opt.count}条)</span>
                                            </button>
                                        })}
                                    </div>
                                </li>
                                <li class="py-3 sm:py-4">
                                    <p className="text-sm text-muted-foreground">Set Fund Minor Tags Filter</p>
                                    <Separator className="my-2" />
                                    <div
                                        className="mx-auto grid w-full max-w-3xl grid-cols-2 gap-4 text-xs text-slate-600 sm:grid-cols-3 sm:gap-2 sm:text-sm md:grid-cols-4 md:text-base"
                                    >
                                        {tagOptions.filter(opt => !primaryTags.includes(opt.value)).map(opt => {
                                            return <button
                                                onClick={() => {
                                                    const changeTags = [...currentTags];
                                                    if (changeTags.includes(opt.value)) {
                                                        changeTags.splice(changeTags.indexOf(opt.value), 1);
                                                        setCurrentTags(changeTags);
                                                        onTagsChange?.(changeTags);
                                                    } else {
                                                        changeTags.push(opt.value);
                                                        setCurrentTags(changeTags);
                                                        onTagsChange?.(changeTags);
                                                    }
                                                }}
                                                className={`rounded-lg p-2 ${currentTags.includes(opt.value) ? 'bg-blue-600 text-slate-200' : 'bg-slate-200'}`}
                                            >
                                                {opt.label}<span className="p-1 opacity-60 sm:p-2">({opt.count}条)</span>
                                            </button>
                                        })}
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </PopoverContent>
            </Popover>
        </div>
    )
}
